<template>
  <div>
    <el-drawer
      :show-close="showClose"
      :size="size"
      :withHeader="false"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      :modal="modal"
    >
      <slot></slot>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "drawer",
  props: {
    drawer: {
      // 抽屉层控制属性
      type: Boolean,
      default: true,
    },
    showClose: {
      type: Boolean,
      default: false,
    },
    getDrawer: {
      type: Function,
      default: function () {
        return function () {};
      },
    },
    size: {
      type: String,
      default: "5.6rem",
    },
    direction: {
      // 控制方向
      type: String,
      default: "rtl",
    },
    modal: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
  computed: {},
  methods: {
    handleClose() {
      this.$props.getDrawer();
    },
  },
};
</script>

<style>
.el-drawer {
  overflow: scroll !important;
  position: relative;
}
.el-drawer__container ::-webkit-scrollbar {
  display: none !important;
}
</style>
